<template>
	<div>
	<transition name="fadeInf">
		<div id="dataLine" v-show="A" ></div>
	</transition>
	<div id="dataDiv">
		<div id="gender">
			<p>性别： </p>
			<img src="../assets/img/男.png"/>
		</div>
		<div id="sage">
			<p>年龄： </p>
			<span>18</span>
		</div>
		<div id="sname">
			<p>姓名：</p>
			<span>阿克西亚</span>
		</div>
		<div id="university">
			<p>学校：</p>
			<span>华北理工大学</span>
		</div>
		<div id="pro">
			<p>职业： </p>
			<span>程序员</span>
		</div>
		<div id="dir">
			<p>方向：</p>
			<span>Java/Android/Html+CSS+Js/Vue.js</span>
		</div>
	</div>
	</div>
	
</template>

<script>
export default{
	data(){
	   	return{
	   		A:true
	   	}
	}
}
</script>

<style>
	#dataDiv{
		position: absolute;
		top: 10%;
		left: 37.2%;
		width: 57%;
		height: 80%;
		
	}
	#dataDiv div{
		position: relative;
		
	}
	#gender{
		top: 5%;
	}
	#gender img{
		width: 28px;
		position: relative;
		top: 5px;
	}
	#sage{
		top:15%;
	}
	#sname{
		top:25%;
	}
	#university{
		top:35%;
	}
	#pro{
		top:45%;
	}
	#dir{
		top:55%;
	}
	#dataDiv span{
		position: relative;
		font-family: "微软雅黑";
		font-size: 20px;
		font-weight: 600;
		color: #515151;
	}
	#dataDiv p{
		position: relative;
		font-family: "微软雅黑";
		font-size: 22px;
		font-weight: 580;
		color: gray;
		display: inline;
	}
	
	#dataLine{
		position: absolute;
		top: 60%;
		left: 9.8%;
		width: 80px;
		height: 3px;
		background-color: #515151;
	}
	.fadeInf-enter-active, .fade-leave-active{
        transition: 0.6s all ease;
    }
    .fadeInf-enter-active{
        opacity:1;
    }
    .fadeInf-leave-active{
        opacity:0;
    }
    .fadeInf-enter{
        opacity:0;
    }
</style>